iT邦幫忙

2021 iThome 鐵人賽

DAY 14
2

在開始實作畫面之前,我們先來了解一下常見的 UI Framework,並瞭解他們的設計方式,以便後續做設計上的 sass 結構參考吧!


常見的 UI Framework

透過開源使用的 UI Framework ,讓我們可以快速生成頁面樣式而不用從頭手刻,針對需要客製的地方修改即可。現今已經有搭配各種 js 而生成的 Framework ,使用起來相當方便,以下就帶大家看看常見的那些吧。

Boostrap

最基本搭配 html 的,大家耳熟能詳的那位應該就是 Bootstrap 了吧!使用方法也很簡單 npm , yarn 引入即可。

可以看到他的結構,是用大量的 Partial 組裝,讓每個物件有獨立的 scss ,之後在 boostrap.scss 中引入所有元件 style。

Untitled

// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
// ... 以下略:D

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
// scss-docs-end import-stack

React - UI Framework

Material UI

這個算是 Android 最常見的 Material Design 衍生的 ui framework,其見面設計幾乎就跟一般 Android 手機的樣式一樣,可搭配使用的元件也很多,社群討論度也十分熱絡,是個蠻常被使用的系列之一。

MUI: The React component library you always wanted

Ant Design

中國設計的 Framework ,整體設計感覺起來年輕有活力,配色也很活潑,比較特別的是他的 grid 系統切分成24格,可以針對更細微的 column 去做設定。

Ant Design - The world's second most popular React UI framework


Vue - UI Framework

Vuetify

Vue 系列最常見的應該就是他,也是基於 Material Design Framework 下的設計,同樣也提供的很多元件以供你快速實作技能。

Vuetify - A Material Design Framework for Vue.js

Element +

同樣擁有大量的元件可以使用,也是十分方便的 UI Framework,是搭配 Typescript 做開發,比較特別的是有預設做國際化的設計優化,如果是做多國語言會十分方便,不用再額外引入 i18n 自己處理。

Element Plus - The world's most popular Vue 3 UI framework

Angular - UI Framework

Angular Material

一樣就是每個陣營都會有的 Material Design components 哈哈,這應該也不用多做介紹了吧!基本的元件一樣也都十分足夠。

Angular Material

Angular UI

比較意外的是,Angular 系列的 UI Component 好像少很多?資源不比其他兩位豐富 是太難嗎? 但是卻有一個是獨立拉出各個 component 組合的 Angular UI ,而 github 上的內容也是針對各元件有相應 repo 可以去做參考。

AngularUI

以上,介紹完了,阿哩嘎多~~明天來刻刻啦!


除此之外,也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了!是世界奇觀!

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端?後端?你早晚都要全端的,何不從現在開始?


上一篇
DAY 13 接下來的實作
下一篇
DAY 15 開始設置變數吧!
系列文
SASS 基礎初學三十天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Siqing47
iT邦新手 5 級 ‧ 2021-09-29 19:02:53

Vuetify好用!

我要留言

立即登入留言